<template>
  <ul class="item-list" ref="wrapper">
    <li
      v-for="(item, idx) in items"
      :key="idx"
      @click="changeIdx(idx)"
      :class="{ colorBlue: idx === props.idx }"
    >
      {{ item }}
    </li>
    <li ref="itemSig" class="item-signal" :style="itemSigSty"></li>
  </ul>
</template>

<script lang="ts" setup>
import { computed, ref, Ref, onMounted } from 'vue'

const props = defineProps<{
  items: string[]
  idx: number
}>()

const emit = defineEmits<{
  (e: 'changeIdx', idx: number): void
}>()

let catWidth = ref(0)

let itemSigSty = computed(() => {
  let ret = {
    transform: `translateX(${catWidth.value * props.idx}px)`,
    left: `${catWidth.value / 4}px`,
    width: `${catWidth.value / 2}px`,
  }
  return ret
})

function changeIdx(idx: number) {
  emit('changeIdx', idx)
}

let wrapper: Ref<HTMLElement | null> = ref(null)

onMounted(() => {
  let style = window.getComputedStyle(wrapper.value as HTMLElement)
  let widthDes = style.getPropertyValue('width')
  let width = parseFloat(widthDes)
  catWidth.value = width / props.items.length
})
</script>

<style scoped lang="scss">
@import 'style/config';

$w: $itemListWidth;
$h: $itemListHeight;

.item-list {
  position: relative;
  display: flex;
  width: $w;
  height: $h;
  overflow: hidden;

  li {
    flex-grow: 1;
    flex-basis: 0;
    text-align: center;
    line-height: $h;
    font-size: calc($h * 0.3);

    &:hover {
      cursor: pointer;
    }

    &.item-signal {
      position: absolute;
      height: 5%;
      background-color: #3a81ff;
      bottom: 0;
      transition: 0.3s;
    }

    // &:last-child {
    //   float: right;
    //   position: relative;
    //   font-size: calc($h * 0.4);

    //   .search-bar {
    //     --w: 200%;
    //     --h: var(--th);
    //     --fs: calc(var(--th) * 0.6);
    //     --ih: calc(var(--th) * 0.6);
    //     position: absolute;
    //     top: 0;
    //     right: 0;

    //     &:focus-within {
    //       --w: 350%;
    //     }
    //   }
    // }
  }
}
</style>
